<style>
    span.kong {
        display: inline-block;
    }
    
    .layui-table[lay-size=lg] td,
    .layui-table[lay-size=lg] th {
        padding: 12px 15px;
    }
    
    .menu-open {
        color: #666;
        display: inline-block;
        font-size: 14px;
        margin-right: 6px;
    }
    
    .menu-open .layui-icon-down {
        display: none;
    }
    
    .menu-open.open .layui-icon-right {
        display: none;
    }
    
    .menu-open.open .layui-icon-down {
        display: inline-block;
    }
    
    .menu-open i {
        font-size: 14px;
    }
    
    .level-child {
        display: none;
    }
</style>
<div class="widget-head" style="margin-top:0;">
    <div class="widget-title">权限菜单</div>
</div>
<div class="layui-clear">
    <a class="layui-btn fl" href="javascript:;" style="margin-left:0" onclick="think_open('/permission/admin/edit','新增权限',['500px','700px'],0)">新增权限</a>
    <a class="layui-btn layui-btn-normal fl" id="menu-btn" href="javascript:;" data-type="close">展开/折叠</a>
</div>
<table class="layui-table" lay-skin="line" lay-size="lg" style="border-right:0;border-left:0;">
    <colgroup>
        <col width="200">
        <col width="100">
        <col>
        <col>
        <col width="80">
        <col width="80">
        <col width="170">
        <col width="160">
    </colgroup>
    <thead>
        <tr>
            <th>菜单名称</th>
            <th>类型</th>
            <th>权限标识</th>
            <th>路由</th>
            <th>状态</th>
            <th>排序</th>
            <th>更新时间</th>
            <th>操作</th>
        </tr>
    </thead>
    <?php
        function output_tr($tree = [],$index = 0){
            $html = '';
            $types = C('PERMISSION_TYPES');
            foreach($tree as $item){
                $html_tr  = '<tr class="menu-tr tr-id-'.$item['id'].' level-'.$index.' '.($index == 0 ? '' : 'level-child').' parent-id-'.$item['parentid'].'" data-level="'.$index.'" data-id="'.$item['id'].'">';
                $html_tr .= '<td><span class="kong" style="width:'.(20*$index).'px"></span>'.return_arrow($item).$item['title'].'</td>';
                $html_tr .= '<td>'.$types[$item['type']].'（'.$item['type'].'）</td>';
                $html_tr .= '<td>'.$item['perms'].'</td>';
                $html_tr .= '<td>'.$item['paths'].'</td>';
                $html_tr .= '<td>'.return_status($item['is_disable']).'</td>';
                $html_tr .= '<td>'.$item['listorder'].'</td>';
                $html_tr .= '<td>'.Date('Y-m-d H:i:s',$item['update_time']).'</td>';
                $html_tr .= '<td>'.return_btns($item).'</td>';
                $html_tr .= '</tr>';
                $html .= $html_tr; 
                if($item['children']){
                    $html .= output_tr($item['children'],$index+1);
                }
            }
            return $html;
        }

        function return_btns($item){
            $add_url = "think_open('/permission/admin/edit/parentid/".$item['id']."','新增权限菜单',['500px','700px'],0)";
            $add_btn = '<a href="javascript:;" onclick="'.$add_url.'">新增</a>';
            $edit_url = "think_open('/permission/admin/edit/id/".$item['id']."','编辑权限菜单',['500px','700px'],0)";
            $edit_btn = '<a href="javascript:;" onclick="'.$edit_url.'">编辑</a>';
            $del_btn = '<a href="javascript:;" data-url="/permission/api_admin/del/ids/'.$item['id'].'" class="mini_del shuaxin">删除</a>';
            $btns = $item['type'] == 'A' ? $edit_btn.$del_btn : $add_btn.$edit_btn.$del_btn;
            return '<div class="action-btn">'.$btns.'</div>';
        }

        function return_arrow($item){
            return $item['children'] ? '<a href="javascript:;" class="menu-open"><i class="layui-icon layui-icon-right"></i><i class="layui-icon layui-icon-down"></i></a>' : '';
        }

        function return_status($status = 0){
            return $status == 0 ? '<span class="xy-status">开启</span>' : '<span class="xy-status red">关闭</span>';
        }
    ?>
        <tbody id="menu-box">
            <php>echo output_tr($treedata);</php>
        </tbody>
</table>

<js href="/Public/store.everything.min.js" />
<script>
    // store.set('user', { name:'Marcus' })
    // store.get('user')
    // store.remove('user')
    // store.clearAll()
    // store.each(function(value, key) {
    //     console.log(key, '==', value)
    // })
    layui.use(['jquery'], function() {
        var $ = layui.jquery;
        load_menu_status();
        $('#menu-btn').click(function() {
            if ($(this).attr('data-type') == 'close') {
                $(this).attr('data-type', 'open');
                $('.menu-open').addClass('open');
                $('.level-child').show();
            } else {
                $('#menu-btn').attr('data-type', 'close');
                $('.menu-open').removeClass('open');
                $('.level-child').hide();
            }
            save_menu_status();
        });

        $('.menu-open').click(function() {
            var $tr = $(this).parent('td').parent('.menu-tr');
            var id = $tr.data('id');
            var level = $tr.data('level');
            // console.log(parent_id);
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                hide_tr($tr, level); //递归隐藏行
            } else {
                $(this).addClass('open');
                $('.parent-id-' + id).show();
            }
            save_menu_status();
        });
        //递归隐藏表格行
        function hide_tr($tr, start_level = 0) {
            var $next_tr = $tr.next('.menu-tr');
            var level_next = $next_tr.data('level');
            if (start_level != level_next) {
                $next_tr.hide();
                $next_tr.find('.menu-open').removeClass('open');
                hide_tr($next_tr, start_level);
            }
        }

        //存储菜单现在的打开状态
        function save_menu_status() {
            var data = [];
            $('#menu-box tr').each(function() {
                var id = $(this).data('id');
                var check = $(this).is(":hidden") ? 0 : 1;
                var hasopen = $(this).find('.menu-open').hasClass('open') ? 1 : 0;
                data[data.length] = [id, check, hasopen];
            });
            store.set('permission_menu_open_status', data);
        }

        //加载菜单之前的状态
        function load_menu_status() {
            var status = store.get('permission_menu_open_status');
            if (typeof(status) == 'undefined') {
                status = [];
            }
            for (var i = 0; i < status.length; i++) {
                var item = status[i];
                if (item[1]) {
                    if (item[2]) {
                        $('.tr-id-' + item[0]).find('.menu-open').addClass('open');
                    }
                    $('.tr-id-' + item[0]).show();
                }
            }
            // console.log(status); 
        }
    });
</script>